﻿@page "/datagrid/batch-editing"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates CRUD operations in DataGrid. You can perform CRUD operations as follows,</p>
     <ul>
        <li><strong>Add</strong> -  To add new record, click Add toolbar button. </li>
        <li><strong>Edit</strong> - To edit record, double click a row or click toolbar Edit button after selecting a row. </li>
        <li><strong>Delete</strong> - To delete record, click toolbar Delete button after selecting a row </li>
        <li><strong>Update</strong>,<strong>Cancel</strong> - You can save or discard changes by clicking toolbar Update and Cancel button respectively.</li>
    </ul>
    <p>By default, a new row will be added at the top of the DataGrid. You can change it by defining the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition'>NewRowPosition</a></code> in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridEditSettings.html'>GridEditSettings</a></code> as <strong>Bottom</strong></p>
</SampleDescription>
<ActionDescription>
    <p>The DataGrid supports CRUD operations. The CRUD operations can be configured in DataGrid using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridEditSettings.html'>GridEditSettings</a></code> component. It also has different modes to manipulate the datasource.</p>
    <p>The available modes are,</p>
    <ul>
        <li><strong>Inline</strong></li>
        <li><strong>Dialog</strong></li>
        <li><strong>Batch</strong></li>
    </ul>
    <p>In this demo, Batch mode is enabled for editing by defining <code><a target='_blank' class='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode'>Mode</a></code> in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridEditSettings.html'>GridEditSettings</a></code> component as <strong>Batch</strong>. You can start editing by double clicking a cell and change the cell value. The edited cell will be highlighted while navigating to a new cell, so that you know which cells had been edited. You can then bulk save the edited data to the datasource by clicking on the toolbar's <strong>Update</strong> button.</p>
    <p>More information on the batch editing can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/editing/#batch'>documentation section</a>.</p>
    <p>You can refer to our <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-datagrid/editing'>Blazor Editable Grid</a> page to know more about editing and its feature representations. </p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" AllowPaging="true">
                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="TextAlign.Right"  Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" ValidationRules="@(new ValidationRules{ Required=true, Range = new double[]{1, 1000}})" EditType="EditType.NumericEdit" Format="C2" TextAlign="TextAlign.Right"  Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
